<template>
  <div class="store">
    <div class="title">
      <van-nav-bar
        title="线下书店"
        fixed
        placeholder
        left-text="返回"
        :border="false"
      >
        <template #left>
          <van-icon name="arrow-left" @click="gotoback">&nbsp;返回</van-icon>
        </template>
        <template #right>
          <van-image
            src="https://i.loli.net/2021/07/18/MuqC9jzva6skVOi.png"
            @click="showShare = true"
            class="titleimg"
          />
          <van-share-sheet
            v-model:show="showShare"
            :options="options"
            @select="onSelect"
          />
        </template>
      </van-nav-bar>
    </div>
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img
            src="https://i.loli.net/2021/07/18/tlvpM7Zbse4URAJ.png"
            alt="" /></van-swipe-item
        ><van-swipe-item
          ><img src="https://i.loli.net/2021/07/18/wY9mjKL32yt1SdB.png" alt=""
        /></van-swipe-item>
      </van-swipe>
    </div>
    <main>
      <div class="titlebox">
        <p>樊登书店</p>
        <div class="line"><i></i><span></span><i></i></div>
      </div>
      <div class="fubiaoti">
        <p>服务中心&nbsp;&nbsp;社交中心</p>
        <p>分享中心&nbsp;&nbsp;学习中心</p>
      </div>
      <div class="imgbox1">
        <img src="../../public/store/xxsd-4@2x.png" alt="" class="img1" /><img
          src="../../public/store/xxsd-5@2x.png"
          alt=""
          class="img2"
        /><img src="../../public/store/xxsd-6@2x.png" alt="" class="img3" />
      </div>
      <div class="textbox">
        <p>
          樊登书店是樊登读书旗下的书店品牌，现有215家加盟店，3家直营店，覆盖全国30个省和103个城市，多年来持续为书友输出作者签售、线下
          活动与丰富课程
        </p>
        <p>
          我们有着樊登读书的互联网社群知识基因，秉承
          “一间樊登书店，点亮一个社区”的理念。我们不仅售卖优质书籍，更致力于满足大众对线下阅读、个人成长、社交分享的需求，为3亿国人打
          造学习、文化、生活美学的“第三空间”。
        </p>
        <p>
          欢迎大家加入到这一份点亮自己和他人的事业中来。愿每一位书友，都能在樊登书店遇见灵感之光。
        </p>
      </div>
      <div class="imgbox2">
        <img src="../../public/store/xxsd-7@2x.png" alt="" />
      </div>
      <div class="titlebox">
        <p>服务业态</p>
        <div class="line"><i></i><span></span><i></i></div>
      </div>
      <div class="imgbox3">
        <img src="../../public/store/xxsd-8@2x.png" alt="" /><img
          src="../../public/store/xxsd-9@2x.png"
          alt=""
        /><img src="../../public/store/xxsd-10@2x.png" alt="" /><img
          src="../../public/store/xxsd-9@2x.png"
          alt=""
        /><img src="../../public/store/xxsd-12@2x.png" alt="" />
      </div>
    </main>
    <footer>
      <img src="../../public/store/xxsd-13@2x.png" alt="" class="img1" />
      <img src="../../public/store/xxsd-14@2x.png" alt="" />
      <img src="../../public/store/xxsd15@2x.png" alt="" />
      <img src="../../public/store/xxsd-16@2x.png" alt="" class="footerimg" />
    </footer>
  </div>
</template>

<script>
import { ref } from "vue";
import { Toast } from "vant";
import { useRouter } from "vue-router";
export default {
  setup() {
    const $router = useRouter();
    const showShare = ref(false);
    const options = [
      [
        { name: "微信", icon: "wechat" },
        { name: "朋友圈", icon: "wechat-moments" },
        { name: "微博", icon: "weibo" },
        { name: "QQ", icon: "qq" },
      ],
      [
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
        { name: "小程序码", icon: "weapp-qrcode" },
      ],
    ];
    const onSelect = (option) => {
      Toast(option.name);
      showShare.value = false;
    };
    const gotoback = () => {
      $router.go(-1);
    };
    return {
      options,
      showShare,
      onSelect,
      gotoback,
    };
  },
};
</script>

<style lang="less">
:root {
  --van-nav-bar-icon-color: #000;
  --van-nav-bar-text-color: #000;
}
.store {
  font-family: PingFang SC;
  font-size: 16px;
  background: #efefef;
  .title {
    .van-ellipsis {
      color: #000;
    }
    .titleimg {
      width: 18px;
    }
  }
  .banner {
    img {
      width: 100%;
      height: 453px;
    }
  }
  main {
    width: 323px;
    margin: 15px auto;
    padding-bottom: 20px;
    background: #ffffff;
    .titlebox {
      width: 100%;
      display: flex;
      flex-direction: column;
      font-weight: bold;
      align-items: center;
      p {
        font-size: 21px;
        font-family: PingFang SC;
        color: #000000;
        text-align: center;
        padding-top: 30px;
      }
      .line {
        margin-top: 18px;
        i,
        span {
          display: inline-block;
          background: #eeca43;
          vertical-align: middle;
        }
        i {
          width: 36px;
          height: 1px;
        }
        span {
          width: 61px;
          height: 5px;
        }
      }
    }
    .fubiaoti {
      margin: 14px 0 0 0;
      p {
        text-align: center;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #b8b8b8;
      }
    }
    .imgbox1 {
      width: 344px;
      margin-top: 25px;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      .img1,
      .img3 {
        width: 108px;
        padding-top: 15px;
        vertical-align: top;
      }
      .img2 {
        width: 120px;
        margin: 0 4px;
      }
    }
    .textbox {
      padding: 0 15px 170px;
      p {
        font-size: 13px;
        font-family: PingFang SC;
        color: #989898;
        line-height: 18px;
        padding: 13px 0;
      }
    }
    .imgbox2 {
      position: absolute;
      margin-top: -195px;
      left: 50%;
      transform: translateX(-50%);
      width: 100vw;
      img {
        width: 100%;
      }
    }
    .imgbox3 {
      margin: 33px auto 0;
      width: 289px;
      height: 240px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      img {
        height: 75px;
      }
    }
  }
  footer {
    width: 375px;
    margin: 15px auto;
    padding: 15px 15px 90px;
    background: #fff;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .img1 {
      width: 343px;
    }
    img {
      width: 166px;
    }
    .footerimg {
      position: absolute;
      bottom: 15px;
      left: 50%;
      transform: translateX(-50%);
      width: 105px;
      height: 23px;
      background: #ffffff;
    }
  }
}
</style>
